<template>
	<div class="rightcenter">
		<div class="right-centerr" v-for="(item, index) in errorLogtable" :key="index">
			<el-row>
				<el-col>
					<p>{{ item.content }}</p>
				</el-col>
			</el-row>
			<el-row></el-row>
			<el-row>
				<el-col v-if="item.typeName == '单选题' || item.typeName == '判断题'">
					<el-radio-group v-model="radio">
						<el-radio v-for="(item, index) in item.optionList" :label="index" :key="index" :disabled="true">
							{{ item.value }}:{{ item.name }}
						</el-radio>
					</el-radio-group>
					<p :style="{'color':errcolor}">已选答案：{{ item.reply }}</p>
					<p :style="{'color':currcolor}">正确答案：{{ item.anser }}</p>
				</el-col>
				<el-col v-if="item.typeName == '多选题'">
					<el-checkbox-group v-model="checkList">
						<el-checkbox v-for="(item, index) in item.optionList" :key="index" :disabled="true"
							:label="index">
							{{ item.value }}:{{ item.name }}
						</el-checkbox>
					</el-checkbox-group>
					<p :style="{'color':errcolor}">已选答案：{{ item.reply }}</p>
					<p :style="{'color':currcolor}">正确答案：{{ item.anser }}</p>
				</el-col>
			</el-row>
			<!-- 案例分析题 -->
			<el-row v-if="item.typeName == '案例分析题'">
				<el-col v-for="(item1, childQ) in item.children" :key="childQ"
					v-if="item1.typeName == '单选题' || item1.typeName == '判断题'">
					<p>{{ item1.content }}</p>
					<el-radio-group v-model="caseAnalysis[childQ]">
						<el-radio v-for="(item, optionIndex) in item.children[childQ].optionList" :label="item.value"
							:key="optionIndex" :disabled="true">
							{{ item.value }}:{{ item.name }}
						</el-radio>
					</el-radio-group>
					<p :style="{'color':errcolor}">已选答案：{{ item.children[childQ].reply }}</p>
					<p :style="{'color':currcolor}">正确答案：{{ item.children[childQ].anser }}</p>
				</el-col>
				<el-col v-for="(item1, childQ) in item.children" :key="childQ" v-if="item1.typeName == '多选题'">
					<p>{{ item1.content }}</p>
					<el-checkbox-group v-model="caseAnalysis[childQ]">
						<el-checkbox v-for="(item, optionIndex) in item.children[childQ].optionList" :key="optionIndex"
							:disabled="true" :label="item.value">
							{{ item.value }}:{{ item.name }}
						</el-checkbox>
					</el-checkbox-group>
					<p :style="{'color':errcolor}">已选答案：{{ item.children[childQ].reply }}</p>
					<p :style="{'color':currcolor}">正确答案：{{ item.children[childQ].anser }}</p>
				</el-col>
			</el-row>
		</div>
		<el-row style="text-align: left;">
			<el-col>
				<el-button  size="mini" @click="perQuestion()" v-if="current > 1" class="preornext">上一页</el-button>
				<el-button size="mini" @click="nextQuestion()" v-if="current * size < total" class="preornext">下一页
				</el-button>
				<p v-if="errorLogtable.length == 0">还没有数据哦~~~~~~~~</p>
				<el-button size="mini" @click="quiterrorlog()" v-if="errorLogtable.length > 0" class="preornextemit">退出
				</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		errorLog
	} from "../api/index.js";
	export default {
		name: "errolog",
		data() {
			return {
				errcolor: '#FD0E0E',
				currcolor: '#0E8FFD',
				errorLogtable: [],
				checkList: [],
				radio: "",
				caseAnalysis: [],
				current: 1,
				menuId: "",
				size: 5,
				userId: "",
				total: "",
			};
		},
		mounted() {
			if (localStorage.getItem("userId") && localStorage.getItem("menuId")) {
				this.menuId = localStorage.getItem("menuId");
				this.userId = localStorage.getItem("userId");
				console.log(this.menuId)
			} else {
				this.$router.push("courcesinfo");
			}
			this.loadingerror();
		},
		methods: {
			quiterrorlog() {
				this.$router.push("courcesinfo");
			},
			perQuestion() {
				this.current--;
				this.loadingerror();
			},
			nextQuestion() {
				this.current++;
				this.loadingerror();
			},
			loadingerror() {
				errorLog({
						current: this.current,
						menuId: this.menuId,
						size: this.size,
						userId: this.userId,
					})
					.then((res) => {
						if (res.data.code === 0) {
							this.errorLogtable = res.data.data.records;
							console.log("errorLog", this.errorLogtable);
							console.log("errorLog", res.data.data);
							this.total = res.data.data.total;
							for (var i = 0; i < this.errorLogtable.length; i++) {
								if (this.errorLogtable[i].typeName == "案例分析题") {
									for (
										var c = 0; c < this.errorLogtable[i].children.length; c++
									) {
										if (
											this.errorLogtable[i].children[c].typeName == "单选题" ||
											this.errorLogtable[i].children[c].typeName == "判断题"
										) {
											this.caseAnalysis[c] = "";
										} else if (
											this.errorLogtable[i].children[c].typeName == "多选题"
										) {
											this.caseAnalysis[c] = [];
										}
									}
								}
							}
						} else {
							this.$message({
								type: "error",
								message: res.data.msg,
							});
						}
					})
					.catch((error) => {
						this.$message({
							type: "error",
							message: error,
						});
					});
			},
		},
	};
</script>

<style scoped>
	button {
		margin-left: 5%;
	}

	.dialog-container {
		width: 100%;
		height: 300px;
		border: 1px solid black;
	}

	.dialog-center {
		width: 60%;
		height: 80px;
		margin: auto;
		margin-top: 15%;
		text-align: center;
		border: 1px solid black;
	}

	.dialog-center1 {
		width: 60%;
		height: 120px;
		margin: auto;
		margin-top: 10%;
		text-align: center;
		border: 1px solid black;
	}

	.finally {
		margin: auto;
		margin-left: 50%;
		margin-top: 20px;
	}

	.rightcenter {
		text-align: left;
		margin-left: 5%;
	}

	.preornext {
		background-color: #469DED;
		border: 1px solid #FD8C27;
		color: white;
		margin-top: -8%;
		width: 75px;
		border-radius: 5px;
	}

	.preornextemit {
		background-color: #FD8C27;
		border: 1px solid #469DED;
		color: white;
		margin-top: -8%;
		width: 65px;
		border-radius: 5px;
	}
</style>
